<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>修改密码</title>

<meta name="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script type="text/javascript">
	  $(document).ready(function(){
		  
	   var passWordValidate=false,repassWordValidate=false;oldpasswordValidate=false;
	   var isValidate=false; 
	   $("#oldpassword").blur(function(){
		   var val=$(this).val();
		  
		   var reg=/[a-zA-Z0-9]{3,16}/;
		   if(isNullOrBlankOrUD(val)){
			  $("#oldpassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">原始密码不能为空</span>');
              nickNameValidate=false;
		   }else if(!reg.test(val)){
			   $("#oldpassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">输入格式不对</span>');
			    nickNameValidate=false;
		   }/* else if(isNotExsit){
			   $("#oldpassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">该昵称已被使用</span>');
			    nickNameValidate=false;
		   } */else{
            
              $.ajaxSetup({async: false});
  			/* JQuery 发起get请求 */
  			$.get("${path}/personal/checkpassword",{oldpassword:val},function(data,status){
  				//得到返回数据
  				var dataObj = eval(data);
  				var flag = dataObj.flag;
  				/* alert("flag="+flag); */
  				if (flag=="ok") {
  					oldpasswordValidate=true;
  				  $("#oldpassword_info").html('<span class="glyphicon glyphicon-ok"></span>');
  				}else{
  					oldpasswordValidate=false;
  					 $("#oldpassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">原始密码错误</span>');
  				}
  			});
			 /*  $("#nickName_info span").remove(); */
            /*   nickNameValidate=true; */
		   }
		   
	   });

       	$("#password").blur(function(){
				var val = $(this).val();
				var reg = /[a-zA-z0-9]{6,25}/;
				var repassword=$("#repassword").val();
				if(isNullOrBlankOrUD(val)){
					$("#password_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 登录密码为必填项</span>');
					passwordValidate = false;
				}else{
					if(!reg.test(val)){
					$("#password_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 必须由6-25位的字母或数字组成</span>');
					passwordValidate = false;
				}else{
					$("#password_info").html('<span class="glyphicon glyphicon-ok"></span>');
					if(!isNullOrBlankOrUD(repassword)){
						if (repassword==val) {
							$("#password_info").html('<span class="glyphicon glyphicon-ok"></span>');
							$("#repassword_info").html('<span class="glyphicon glyphicon-ok"></span>');
							passwordValidate = true;
							repasswordValidate=true;
						}else{
							$("#password_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码必须与登录密码一致</span>');
							passwordValidate = false;
							$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码必须与登录密码一致</span>');
							repasswordValidate = false;
						}
					}
					
					$("#password_info").html('<span class="glyphicon glyphicon-ok"></span>');
					passwordValidate = true;
				}}
			});
			$("#repassword").blur(function(){
				var val = $(this).val();
				var password = $("#password").val();
				var reg = /[a-zA-z0-9]{6,25}/;
				if(isNullOrBlankOrUD(val)){
					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码为必填项</span>');
					repasswordValidate = false;
				 
				}else{
					if(!reg.test(val)){
					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 必须由6-25位的字母或数字组成</span>');
					repasswordValidate = false;
				}else if(val != password){
					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码必须与登录密码一致</span>');
					repasswordValidate = false;
				}else{
					$("#repassword_info").html('<span class="glyphicon glyphicon-ok"></span>');
					repasswordValidate = true;
				}
				}
			});
			        
		 $("#update_form").submit(function(){
				isValidate = passwordValidate&&repasswordValidate&&oldpasswordValidate;
				return isValidate;
			});


   });
   
    function isNullOrBlankOrUD(value){
		   if(value=="" ||value==null ||value==undefined){
			  return true;
		   }else{
			  return false;
		   }
	   
      }
   
    </script>
</head>

<body>	
	<jsp:include page="/head"></jsp:include>
	<div class="panel panel-info"
		style="width: 1000px; margin-left: 200px; margin-top: 52px; height: 500px">
		<div class="panel-heading" style="height: 50px">
			<h2 class="panel-title pull-left" style="margin-top: 10px">修改密码</h2>
			<div class="pull-right">
				<!-- <button class="btn  btn-primary " type="button" id="login_btn">返回</button> -->
			 	<a href="<c:url value="/personal/person"/>" class="btn  btn-primary">个人中心</a> 
			</div>
		</div>

		<div class="panel-body">
			<table class="table table-responsive">
				<thead>
					<tr>
						<th style="width: 200px"></th>
						<th width="600px"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<div style="width: 100px; height: 100px; margin-top:20px;" >
							<c:if test="${not empty sessionScope.user.img }">
								<img src="${sessionScope.user.img }" width="100" height="100">
								</c:if>
								<c:if test="${ empty sessionScope.user.img }">
								<img src="${path }/static/images/weishch.png" width="100" height="100"></c:if>
							</div>
							<h4 id="nickname">昵称：${ sessionScope.user.username}</h4>
						</td>
						<td id="content" colspan="2">
							 <form class="form-horizontal" role="form" action="<c:url value="/personal/updatepassword"/>"
								style="margin-top: 60px"; method="post" id="update_form">
								
								<div class="form-group">
									<label class="col-sm-2 control-label" for="password">原始密码</label>

									<div class="col-sm-3">
										<input id="oldpassword" type="password" name="oldpassword"
											placeholder="请输入原始的密码" class="form-control" />
									</div>
									<span id="oldpassword_info"><span
										class="glyphicon glyphicon-lock"></span><span
										class=" info_text"> 必填，由6-25位的字母或数字组成</span></span>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="repassword">新密码</label>

									<div class="col-sm-3">
										<input id="password" type="password" name="password"
											placeholder="请输入确认密码" class="form-control" />
									</div>
									<span id="password_info"><span
										class="glyphicon glyphicon-lock"></span><span
										class=" info_text"> 必填，由6-25位的字母或数字组成</span></span>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="repassword">重复密码</label>
									<div class="col-sm-3">
										<input id="repassword" type="password" name="repassword"
											placeholder="请输入确认密码" class="form-control" />
									</div>
									<span id="repassword_info"><span
										class="glyphicon glyphicon-lock"></span><span
										class=" info_text"> 必填，由6-25位的字母或数字组成</span></span>
								</div>
				
								 <div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
									<span style="color: red">${msg }</span>
										<button type="submit" class="btn btn-primary">提交</button>
										
									</div>
								</div>
							</form> 
							
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
</body>
</html>
